<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <div class="">
        <el-divider class="splitLine">
          <span class="num">1</span>
          <span class="title">协议主体</span>
        </el-divider>
        <el-card shadow="never">
            <el-row type="flex">
              <el-col :span="12">
                <el-form-item label="协议客户" prop="name">
                  <el-row type="flex">
                    <el-button class="leftBox btnBox" size="small">选择客户</el-button>
                    <span class="marginL10">上海正也医药有限公司</span>
                  </el-row>
                </el-form-item>
                <el-form-item label="购进指标">
                  <el-row type="flex">
                    <el-select size="small" class="leftBox" v-model="form.region" placeholder="请选择">
                      <el-option label="金额" value="price"></el-option>
                      <el-option label="数量" value="number"></el-option>
                    </el-select>
                    <el-input class="marginL10 inputW" size="small" v-model="form.name" placeholder="请输入金额/数量"></el-input>
                  </el-row>
                </el-form-item>
                <el-form-item label="销售区域">
                  <el-row type="flex">
                    <el-button size="small" class="leftBox">选择区域</el-button>
                    <el-button size="small" class="leftBox marginL10">
                      <el-row type="flex" justify="space-between">
                        <div>全国</div>
                        <div class="el-icon-close"></div>
                      </el-row>
                    </el-button>
                  </el-row>
                </el-form-item>
                <el-form-item label="购进渠道">
                  <el-row type="flex">
                    <el-select size="small" class="leftBox" v-model="form.region" placeholder="请选择">
                      <el-option label="指定渠道" value="qudao"></el-option>
                    </el-select>
                    <el-button size="small" class="leftBox marginL10 btnBox">请选择渠道</el-button>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="协议状态">
                  <el-select size="small" class="leftBox" v-model="form.region" placeholder="请选择协议状态" style="width: 195px;">
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="异常" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="纯销指标">
                  <el-row type="flex">
                    <el-button size="small" class="leftBox btnBox">金额</el-button>
                    <el-input size="small" class="marginL10 inputW" v-model="form.name" placeholder="请输入金额/数量"></el-input>
                  </el-row>
                </el-form-item>
                <el-form-item label="签订时间">
                  <el-input size="small" v-model="form.desc" class="inputWBig"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
        </el-card>
      </div>
      <div>
        <el-divider class="splitLine">
          <span class="num">2</span>
          <span class="title">产品政策</span>
        </el-divider>
        <el-row type="flex" align="middle" class="allInfo">
          <el-button size="small" type="primary">添加产品</el-button>
          <el-row class="marginL20" type="flex">
            <div>购进总指标（万元）：</div>
            <div>¥152.65</div>
          </el-row>
          <el-row class="marginL20" type="flex">
            <div>指标按季度分解（万元）：</div>
            <div>【Q1】¥152.65,【Q2】¥18.65,【Q3】¥12.65,【Q4】¥12.5</div>
          </el-row>
          <el-row class="marginL20" type="flex">
            <div>纯销总指标（万元）：</div>
            <div>¥152.65</div>
          </el-row>
        </el-row>
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <el-row type="flex" justify="space-between">
              <el-col :span="12">
                <el-row type="flex">
                  <el-col :span="12">
                    <el-form-item label="产品" prop="name" class="nMB">
                      <el-row type="flex">
                        <el-button size="small" class="leftBox btnBox">选择产品</el-button>
                        <span class="marginL10">美复胶丸 24粒/盒</span>
                      </el-row>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="协议效期" class="nMB">
                      <el-input size="small" class="marginL10 inputWSmall" v-model="form.desc" placeholder="请输入金额/数量"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-button class="delBtn btnBox" size="small">删除</el-button>
            </el-row>
          </div>
          <el-table
            class="marginB10"
            :data="tableData"
            border
            :row-style="{height: '0'}" 
            :cell-style="{padding: '3px'}"
            :header-cell-style="{color: '#676767', backgroundColor: '#f8f8f8', padding: '4px'}"
            style="width: 100%">
            <el-table-column prop="date" label="协议价（元）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="票折（元）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="购进指标量（大单位）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="购进指标量（小单位）">
              <template slot-scope="scope">
                <el-select size="small" class="leftBox" v-model="form.region" placeholder="请选择协议状态" style="width: 180px;">
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="异常" value="0"></el-option>
                  </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="购进金额（元）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="纯销指标量（小单位）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="纯销指标金额（万元）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="tableData"
            border
            :row-style="{height: '0'}" 
            :cell-style="{padding: '3px'}"
            :header-cell-style="{color: '#676767', backgroundColor: '#f8f8f8', padding: '4px'}"
            style="width: 100%">
            <el-table-column prop="date" label="协议价（元）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="票折（元）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="购进指标量（大单位）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="购进指标量（小单位）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="购进金额（元）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="纯销指标量（小单位）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="纯销指标金额（万元）">
              <template slot-scope="scope">
                <el-input size="small" class="inputWSmall" v-model="form.name" placeholder="请输入金额/数量"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div class="agreementBox">
        <el-divider class="splitLine">
          <span class="num">3</span>
          <span class="title">补充协议</span>
        </el-divider>
        <el-tabs class="tabsBox" v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="补充协议1" name="first">
            <el-card shadow="never">
              <el-row type="flex" justify="space-between" align="middle" class="marginB10">
                <div>协议内容：</div>
                <el-button class="delBtn" size="small">删除</el-button>
              </el-row>
              <el-input type="textarea" :rows="6" v-model="form.desc1" class="textareaBox"></el-input>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="补充协议2" name="second">
            <el-card shadow="never">
              <el-row type="flex" justify="space-between" align="middle" class="marginB10">
                <div>协议内容：</div>
                <el-button class="delBtn" size="small">删除</el-button>
              </el-row>
              <el-input type="textarea" :rows="6" v-model="form.desc1" class="textareaBox"></el-input>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="补充协议3" name="third">
            <el-card shadow="never">
              <el-row type="flex" justify="space-between" align="middle" class="marginB10">
                <div>协议内容：</div>
                <el-button class="delBtn" size="small">删除</el-button>
              </el-row>
              <el-input type="textarea" :rows="6" v-model="form.desc1" class="textareaBox"></el-input>
            </el-card>
          </el-tab-pane>
        </el-tabs>
        <el-button class="addBox" type="primary" size="small">新增</el-button>
      </div>
    </el-form>
    <el-button type="primary">保存</el-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      activeName: 'first',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '2020-02-01 18:56'
      },
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.el-divider--horizontal{
  margin: 18px 0;
  background: 0 0;
  border-top: 1px dashed #dedede;
} 
.el-divider__text {
  background: #f5f5f5;
}
.splitLine .num {
  width: 18px;
  line-height: 18px;
  border-radius: 50%;
  background: #4d8bfe;
  color: #fff;
  display: inline-block;
  text-align: center;
  margin-right: 10px;
}
.splitLine .title {
  font-weight: bold;
  font-size: 18px;
}
.marginL10 {
  margin-left: 10px;
}
.marginL20 {
  margin-left: 20px;
}
.marginB10 {
  margin-bottom: 10px;
}
.nMB {
  margin-bottom: 0px;
}
.leftBox {
  width: 98px;
}
.inputW {
  width: 348px;
}
.inputWSmall {
  width: 180px;
}
.inputWBig {
  width: 456px;
}
.allInfo {
  margin-bottom: 10px;
}
.agreementBox {
  position: relative;
  margin-bottom: 20px;
}
.tabsBox ::v-deep .el-tabs__nav{
  background: #fff;
}
.tabsBox ::v-deep.el-tabs__header {
  margin: 0px;
}
.textareaBox ::v-deep .el-textarea__inner {
  background-color: #f8f8f8;
}
.addBox {
  position: absolute;
  top: 20px;
  right: 0px;
}
.delBtn {
  width: 54px;
  line-height: 30px !important;
  color: #ff9300;
  padding: 0px;
}
.btnBox {
  height: 32px;
  margin-top: 3px;
}
.el-form-item {
  margin-bottom: 6px;
}
</style>
